<template>
  <div class="data-list-container">
    <h1>数据列表</h1>

    <!-- 搜索框 -->
    <el-input
      v-model="searchQuery"
      placeholder="请输入问题名称进行搜索"
      clearable
      style="margin-bottom: 20px; width: 300px;"
      @clear="handleSearch"
      @keyup.enter="handleSearch"
    >
      <template #append>
        <el-button icon="el-icon-search" @click="handleSearch"></el-button>
      </template>
    </el-input>

    <!-- 数据表格 -->
    <el-table :data="dataList" style="width: 100%" stripe>
      <el-table-column prop="problem" label="问题" width="400"></el-table-column>
      <el-table-column prop="_id" label="ID"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-link type="primary" :underline="false" :href="`/tpa/data-edit/${scope.row._id}`">
            编辑
          </el-link>
          <el-button
            v-if="isAdmin"
            type="danger"
            size="mini"
            style="margin-left: 10px;"
            @click="deleteData(scope.row._id)"
          >
            删除
          </el-button>
          <el-tooltip v-else content="无权限删除数据" placement="top">
            <el-button
              type="danger"
              size="mini"
              style="margin-left: 10px;"
              disabled
            >
              删除
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="margin-top: 20px; text-align: right;"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [], // 存储数据列表
      total: 0, // 总数据量
      pageSize: 10, // 每页显示数量
      currentPage: 1, // 当前页码
      isAdmin: false, // 是否为管理员
      searchQuery: '', // 搜索关键词
    };
  },
  async created() {
    await this.checkAdminStatus(); // 检查用户是否为管理员
    await this.fetchDataList(); // 组件创建时获取数据列表
  },
  methods: {
    // 检查用户是否为管理员
    async checkAdminStatus() {
      try {
        const is_admin = localStorage.getItem('is_admin'); // 从本地存储获取用户信息
        console.log(is_admin);
        this.isAdmin = is_admin; // 判断是否为管理员
      } catch (error) {
        console.error('检查用户权限失败:', error);
      }
    },
    // 获取数据列表
    async fetchDataList() {
      try {
        const response = await this.$request.get('/tpa/api/view_data/', {
          params: {
            page: this.currentPage,
            pageSize: this.pageSize,
            problem_name: this.searchQuery, // 搜索关键词
          },
        });
        this.dataList = response.data; // 更新数据列表
        this.total = response.total; // 更新总数据量
      } catch (error) {
        this.$message.error('获取数据列表失败');
        console.error(error);
      }
    },
    // 分页
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchDataList();
    },
    // 搜索
    handleSearch() {
      this.currentPage = 1; // 重置页码
      this.fetchDataList(); // 重新加载数据列表
    },
    // 删除数据
    async deleteData(id) {
      try {
        // 确认删除
        await this.$confirm('确定要删除此数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });

        // 调用删除接口
        const response = await this.$request.delete(`/tpa/api/delete/?id=${id}`);
        if (response.status === 'success') {
          this.$message.success('数据删除成功');
          this.fetchDataList(); // 重新加载数据列表
        } else {
          this.$message.error('数据删除失败');
        }
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除数据失败');
          console.error(error);
        }
      }
    },
  },
};
</script>

<style scoped>
.data-list-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #303133;
}

.el-table {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>